<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        [class^="box"] {
            width: 500px;
            text-align: justify;
            line-height: 1.5;
        }

        .box-1 {
            font-size: 16px;
            height: 600px;
            border: 1px solid #ccc;
        }
        .box-1 p {
            padding: 0;
            margin: 0;
            text-indent: 32px;
        }

        .box-2  {
            text-align: center;
            margin-top: 20px;
        }
        .box-2 button {
            width: 120px;
            height: 40px;
            border: 1px solid #ccc;
            cursor: pointer;
        }
        .box-2 button.active {
            background-color: #FF5500;
            color: #FFFFFF;
        }
    </style>
</head>
<body>
    <div class="box-1">
        <p class="box-text">
            证券时报网讯，软银集团在回复证券时报记者采访时表示：
            媒体对公司董事长孙正义在业绩交流会上的发言有误解，
            软银集团对中国的承诺没有变化，并会继续投资中国市场，
            以及帮助中国的企业家进行持续创新。
        </p>
    </div>
    <div class="box-2">
        <button data-font-size="20">字体20px</button>
        <button data-font-size="30">字体30px</button>
        <button data-font-size="40">字体40px</button>
    </div>




    <script src="./util.js"></script>
    <script>
        // 要求：
            // 点击字体按钮，设置文本段落样式

        // 步骤：1、2、3

        // 编码：
        // 1. 获取页面相关的标签
        var boxText = _(".box-text");
        var box2 = _(".box-2");

        var buttons = box2.children;

        console.log(buttons);
        console.log(button);
        // console.log(button == buttons);
        // 循环按钮数组
        for(var i = 0 ; i < 3 ; i ++){
            // 2.0 事件绑定
            buttons[i].onclick = function(){
                // 3.0 处理逻辑
                // 排他思想
                for(var j = 0 ; j < 3 ; j ++){
                    buttons[j].className = "";
                }
                // 设置当前点击的按钮背景高亮
                this.className = "active";
                // 获取自定义属性值
                var v1 = this.dataset.fontSize - 0;
                // 设置标签的样式
                _css(".box-text","fontSize",v1);
                _css(".box-text","textIndent",v1 * 2);
            }
        }

        var box_2 = document.querySelector(".box-2");
        var button = document.querySelectorAll(".box-2 > button");
        for(var i = 0 ; i < button.length ; i ++) {
            button[i].onclick = function () {
                for(var j = 0 ; j < button.length ; j ++) {
                    button[j].className = "";
                }
                this.className = "active";
                var v2 = this.dataset.fontSize - 0;
                _css(".box-text" , "fontSize" , v2);
                _css(".box-text" , "textIndex" ,v2*2);
            }
        }

    </script>
</body>
</html>